<template>
  <div class="shop-list">
    <waterfall :col="2" :data="dataArr" @loadmore="loadmore">
      <template>
        <div
          class="shop-list-item"
          v-for="(item, index) in dataArr"
          :key="index"
        >
          <div class="shop-list-content">
            <div class="list-content-image">
              <van-image width="6.99733rem" :src="item.imageUrl" />
            </div>
            <div class="list-content-text">
              {{ item.introduce }}
            </div>
            <div class="list-content-sign">
              <div v-if="item.showSign">
                <van-tag type="primary" text-color="#000" color="#ffdb47">
                  自营
                </van-tag>
                <van-tag color="#ffe1e1" text-color="#ad0000">秒杀</van-tag>
              </div>
            </div>
            <div class="list-content-price">
              <div class="price-block">
                <span>￥</span>
                <span>{{ item.price }}</span>
              </div>
              <div class="evaluate-block">{{ item.evaluateNumber }}+评价</div>
            </div>
          </div>
        </div>
      </template>
    </waterfall>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newdata: [1, 2, 3, 4, 5],
      dataArr: [
        {
          id: 1,
          imageUrl: require('../../images/guesslove/guesslove_1.jpg'),
          introduce: '惠普(hp)光影精灵6代Max16英寸十代英特尔酷睿i5双路泰坦',
          price: 245,
          evaluateNumber: 1300,
          showSign: true,
        },
        {
          id: 2,
          imageUrl: require('../../images/guesslove/guesslove_2.webp'),
          introduce: '惠普(hp)光影精灵6代Max16英寸十代英特尔酷睿i5双路泰坦',
          price: 245,
          evaluateNumber: 1200,
          showSign: false,
        },
        {
          id: 3,
          imageUrl: require('../../images/guesslove/guesslove_3.webp'),
          introduce: '华硕(hp)光影精灵8代Max16英寸十代英特尔酷睿i5双路泰坦',
          price: 245,
          evaluateNumber: 100,
          showSign: true,
        },
        {
          id: 4,
          imageUrl: require('../../images/guesslove/guesslove_4.webp'),
          introduce: '联想(hp)光影精灵6代Max16英寸十代英特尔酷睿i5双路泰坦',
          price: 245,
          evaluateNumber: 1800,
          showSign: false,
        },
        {
          id: 5,
          imageUrl: require('../../images/guesslove/guesslove_6.jpg'),
          introduce: '惠普(hp)光影精灵6代Max16英寸十代英特尔酷睿i5双路泰坦',
          price: 245,
          evaluateNumber: 2300,
          showSign: true,
        },
      ],
    }
  },
  methods: {
    loadmore() {
      var _this = this
      if (this.dataArr.length > 50) {
        return
      }
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
      })
      setTimeout(function() {
        _this.dataArr = _this.dataArr.concat(_this.dataArr)
        _this.$toast.clear()
      }, 1000)
    },
  },
  created() {},
}
</script>
<style lang="less" scoped>
@import '../../style/mixin.less';
.shop-list {
  .shop-list-item {
    // border: 1px solid black;
    margin-bottom: 0.21333rem;
    .shop-list-content {
      background-color: #fff;
      width: 6.99733rem;
      margin: 0 auto;
      border-radius: 8px;
      overflow: hidden;
      .list-content-text {
        font-weight: @titlefontweight;
        font-size: 0.59733rem;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        word-break: break-all;
        height: 1.38rem;
      }
      .list-content-sign {
      }
      .list-content-price {
        margin-top: 0.34133rem;
        margin-bottom: 0.34133rem;
        display: flex;
        .price-block {
          color: #ff4422;
          font-weight: @titlefontweight;
          font-size: 0.768rem;
          > span {
            &:nth-child(1) {
              font-size: 0.59733rem;
            }
          }
        }
        .evaluate-block {
          font-size: 0.512rem;
          padding-left: 0.21333rem;
          padding-top: 0.21333rem;
        }
      }
    }
  }
}
</style>
